<%--
  Created by IntelliJ IDEA.
  User: 86150
  Date: 2020/8/13
  Time: 23:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--360浏览器优先以webkit内核解析-->

    <title>商品列表</title>

    <link rel="shortcut icon" href="favicon.ico" />
    <link href="/css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet" />
    <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="/css/animate.css" rel="stylesheet" />
    <link href="/css/style.css?v=4.1.0" rel="stylesheet" />
    <style>
        .common-search-form{
            margin-bottom:10px;
            padding:11px 5px 0px!important;
        }
        .form-control{
            border-radius: 4px!important;
        }
        .form-horizontal .control-label{
            text-align: center;
        }
    </style>
</head>

<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <!-- Example Pagination -->
        <div class="example-wrap">
            <div class="portlet light common-search-form">
                <div class="portlet-body">
                    <form class="form-horizontal" action="#" id="searchUserFormId">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label col-md-4">商品名:</label>
                                    <div class="col-md-8">
                                        <input type="text" name="goodsName" class="form-control"> </div>
                                </div>
                            </div>
                            <%--<div class="col-md-3">--%>
                                <%--<div class="form-group">--%>
                                    <%--<label class="control-label col-md-4">商品分类:</label>--%>
                                    <%--<div class="col-md-8">--%>
                                        <%--<input type="text" name="category" class="form-control">--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label col-md-4">添加时间:</label>
                                    <div class="col-md-8">
                                            <input placeholder="开始日期" name="createTimeBegin" class="form-control layer-date" id="start">
                                            <input placeholder="结束日期" name="createTimeEnd" class="form-control layer-date" id="end">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label col-md-4">是否上架:</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="isMarketable">
                                            <option value="">全部</option>
                                            <option value="1">已上架</option>
                                            <option value="0">未上架</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="actions pull-left">
                                    <button class="btn btn-primary " id="searchUsers" type="button"><i class="fa fa-check"></i>&nbsp;搜索</button>
                                    <button class="btn btn-info " id="resetSearchUsers" type="button"><i class="fa fa-paste"></i> 重置</button>
                                    <button class="btn btn-info " id="addGoods" type="button"><i class="fa fa-paste"></i> 添加商品</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="example">
                <table id="goodsTable">
                </table>
            </div>
        </div>
        <!-- End Example Pagination -->
    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.7"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0"></script>


<!-- Bootstrap table -->
<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- layerDate plugin javascript -->
<script src="/js/plugins/layer/laydate/laydate.js"></script>

<script type="application/javascript">
    $('#goodsTable').bootstrapTable({
        url: '/mgr/goods/list',
        pagination: true,//开启分页
        dataType: "json",
        method:'post',
        height:400,
        pageSize : 10,
        mobileResponsive: true,
        sidePagination: 'server',
        columns: [{
            "field":"goodsId",
            "title":"ID"
        },{
            "field":"goodsName",
            "title":"商品名称"
        },{
            "field":"category",
            "title":"分类"
        },{
            "field":"isMarketable",
            "title":"是否上架",
            "formatter":function(value,row,index) {
                if (value == 1) {
                    return "已上架";
                }
                if (value == 0) {
                    return "未上架";
                }
                return "未知"
            }
        },{
            "field":"createTime",
            "title":"上架时间",
            "formatter" : function(value, row, index) {
                return dateFormat("YYYY-mm-dd HH:MM", new Date(value))
            }
        },{
            "field":"#",
            "title":"操作",
            "formatter" : function(value, row, index) {
                return "<a href=\"/mgr/goods/toedit?goodsId=" + row.goodsId + "\">编辑</a> " +
                    "<a href=\"/mgr/goods/delete?goodsId=\" " + row.goodsId + ">删除</a>"
            }
        }],
        responseHandler : function(res) {
            return {
                "total": res.total,
                "rows": res.obj
            }
        },
        queryParams : function (param) {
            var goodsName = $("input[name='goodsName']").val();
            var isMarketable = $("select[name='isMarketable']").find("option:selected").val();
            var createTimeBegin = $("input[name='createTimeBegin']").val();
            var createTimeEnd = $("input[name='createTimeEnd']").val();
            param.goodsName = goodsName;
            param.isMarketable = isMarketable;
            if (createTimeBegin) {
                param.createTimeBegin = Date.parse(new Date(createTimeBegin));
            }
            if (createTimeEnd) {
                param.createTimeEnd = Date.parse(new Date(createTimeEnd));
            }
            return param;
        }
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY-MM-DD hh:mm:ss',
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY-MM-DD hh:mm:ss',
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);

    $("#searchUsers").click(function(){
        $("#goodsTable").bootstrapTable("refresh");
    });

    $(function() {
        $("#addGoods").on('click', function () {
            window.location.href = "/mgr/manage_goods_edit.html";
        });
    });
</script>
</body>
</html>
